<script setup lang="ts">
import { ref } from 'vue'
import type { Data } from './types.ts'
import Accordion from '@/components/accordion/accordion.vue'
import AccordionItem from '@/components/accordion/accordion-item.vue'
import VideoComp from '../components/video-comp.vue'
import MyTransition from '@/components/my-transition/index.vue'

defineProps<{ data: Data }>()

const activatedItem = ref(0)
</script>

<template>
  <div>
    <div class="pb-[1.75rem] text-3xl">
      <p v-for="(s, key) in data.mainTitle" :key>{{ s }}</p>
    </div>

    <Accordion v-model="activatedItem">
      <AccordionItem
        v-for="(item, key) in data.list"
        :title="item.mainTitle"
        :item-key="key"
        :subtitle="item.subtitle"
        :key
      >
        <div class="w-full aspect-[383/312] overflow-hidden">
          <MyTransition>
            <keep-alive>
              <VideoComp
                class="w-full h-full"
                v-if="activatedItem === key"
                :video-src="item.videoSrc"
                autoplay
              />
            </keep-alive>
          </MyTransition>
        </div>
      </AccordionItem>
    </Accordion>
  </div>
</template>
